<template>
  <div class="page">
    <s-header :name="'公示信息'" :back="'/notice-board'"></s-header>
    <div class="card-box">
      <div class="card-item">
        <div class="card-header">
          <div class="header-title">
            <div class="title" @click="handleToBuildDetail">{{ dataForm.title }}</div>
            <div :class="dataForm.isPublicEnd ? 'finish' : ''" class="notice-status">
              {{ dataForm.isPublicEnd ? '公示完成' : `公示第${dataForm.day || 1}天` }}
            </div>
          </div>
        </div>
        <van-divider />
        <div class="card-body">
          <div class="time">{{ dataForm.publishedStartTime }}</div>
          <div class="content">{{ dataForm.content }}</div>
          <div class="text-cell">
            <div class="label">公示时间：</div>
            <div class="value">{{ dataForm.publishedStartTime }}至{{ dataForm.publishedEndTime }}（{{ dataForm.publishedDuration }}工作日）</div>
          </div>
          <div>监督电话：{{ dataForm.telephone }}</div>
          <div class="content-end">
            <div>
              <div class="handleDept">{{ dataForm.handleDept }}</div>
              <div class="time">{{ dataForm.publishedStartTime }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="btn-group">
      <van-button type="button" class="cus-btn btn-default" @click="handleBack">返回</van-button>
      <van-button type="button" class="cus-btn btn-success" @click="handleToDissent">提出异议</van-button>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import sHeader from '@/components/SimpleHeader'
import { useRoute, useRouter } from 'vue-router'
import { getNoticeDetail } from '@/service/home'
export default {
  components: {
    sHeader,
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      dataForm: {
        applyId: '',
        content: '',
        handleDept: '',
        handleTime: '',
        publishedDuration: '',
        publishedEndTime: '',
        publishedStartTime: '',
        telephone: '',
        title: '',
      },
    })

    onMounted(async () => {
      const { id } = route.params
      getNoticeDetail(id).then((res) => {
        state.dataForm = res.data
      })
    })

    const handleToBuildDetail = () => {
      router.push({ path: `/record-apply/detail-build/${state.dataForm.applyId}` })
    }
    const handleBack = () => {
      router.go(-1)
    }

    const handleToDissent = () => {
      router.push({ path: `/notice-board/dissent`, query: { applyId: state.dataForm.applyId } })
    }

    return {
      ...toRefs(state),
      handleToDissent,
      handleBack,
      handleToBuildDetail,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin';
.page {
  color: #2e3f6a;
  font-weight: 400;
  .card-box {
    margin-top: 10px;
    .header-title {
      font-size: 16px;
      font-weight: bold;
      .title {
        width: 220px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .fj();
      .notice-status {
        background: #3487f6;
        border-radius: 3px;
        color: @fc;
        font-size: 13px;
        font-weight: 400;
        padding: 4px 14px 5px;
      }
      .finish {
        background-color: #72c604;
      }
    }
    .card-body {
      .time {
        font-size: 14px;
        color: #9297ae;
      }
      .content {
        margin: 15px 0 10px;
        line-height: 22px;
      }
      .text-cell {
        display: flex;
        margin-bottom: 4px;
        .label {
          width: 90px;
        }
      }
      .content-end {
        display: flex;
        justify-content: flex-end;
        text-align: right;
        margin-top: 30px;
        .handleDept {
          margin-bottom: 4px;
        }
      }
    }
  }
  .btn-group {
    margin: 50px 0 20px;
    position: fixed;
    bottom: 0;
    .cus-btn {
      width: 167px;
      margin-right: 10px;
      &:nth-last-child(0) {
        margin: 0;
      }
    }
  }
}
</style>
